<template>
    <div style="color: #fff;">
        <div class="hotexpobox" v-for="(item, index) in expoData" :key="index">
            <div style="height: .98rem">
                <div class="toptools">
                    <svg @click="$router.push('/index')" t="1674987056061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2285"><path stroke="#ffffff" stroke-width="25" d="M362.666667 896c-4.266667 0-8.533333 0-12.8-4.266667-8.533333-8.533333-8.533333-21.333333-4.266667-29.866666L631.466667 512 345.6 162.133333c-8.533333-8.533333-4.266667-21.333333 4.266667-29.866666 8.533333-8.533333 21.333333-4.266667 29.866666 4.266666l298.666667 362.666667c8.533333 8.533333 8.533333 21.333333 0 25.6l-298.666667 362.666667c-4.266667 4.266667-12.8 8.533333-17.066666 8.533333z" fill="#ffffff" p-id="2286"></path></svg>
                    <span>艺术展览会</span>
                    <img src="@/assets/images/搜索.png" alt="">
                </div>
            </div>
            <div class="mainimg">
                <img :src="require('../../../../server/public/images/class/' + item.mainimg)" alt="">
            </div>
            <div class="introduce">
                <h2 class="">{{ item.title }}</h2>
                <p class="title">主旨与理念</p>
                <p class="content">{{ item.introduce }}</p>
                <button>查看更多</button>
            </div>
            <!-- 分类查询 -->
            <div class="itembar">
                <p class="title">艺会项目</p>
            </div>
            <ul class="itemclass">
                <li :class="liActive" v-for="(o, i) in itemList" :key="i" @click="getExpoItem(o.id)">{{o.item}}</li>
            </ul>
            <div class="itemdisplaybox">
                <div class="item" v-for="(o, i) in expoItem" :key="i">
                    <img :src="require('../../../../server/public/images/class/' + o.img)" alt="">
                    <p class="name">{{ o.name }}</p>
                    <p class="painter">{{ o.painter }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Vue2HotExpo',

    data() {
        return {
            liActive: 'liActive1',
            itemList:[
                {
                    id: 1,
                    item: '油画',
                },
                {
                    id: 2,
                    item: '水墨',
                },
                {
                    id: 3,
                    item: '雕塑',
                },
                {
                    id: 4,
                    item: '版画',
                },
                {
                    id: 5,
                    item: '素描',
                },
            ],
            expoData: [
                {
                    title: 'AITE ONLINE艺术博览会',
                    introduce: '2021初始一个颠覆国民生活方式的革新正在发生第二届“AITEONLINE线上艺博会”在4月8日正式揭幕互联网，已经成为全民最重要的生活方式，而艺术领域巨大的变革与崛起，将从线下看展变为线上[赏艺术和购艺术]，在互联网的大环境中，只因你太美，迎面走来的你让我如此蠢蠢欲动，这种感觉我从未拥有，你是我的，我是你的谁',
                    mainimg: 'expo1.jpg',
                    item1: [
                        {name: '《静匿的理想》', img: 'expo2.jpg', painter: '肖克刚'},
                        {name: '《法伊沙苏西》',img: 'expo3.jpg', painter: '蔡徐坤'},
                        {name: '《日常印象-泰姬陵》',img: 'expo4.jpg', painter: '何温诀'},
                        {name: '迈向光明',img: 'expo5.jpg', painter: '张海森伯格'},
                    ],
                    item2: [
                        {name: '《春天》',img: '春天.jpg', painter: '高更'},
                        {name: '《撑伞女人》',img: '撑伞女人.jpg', painter: '高更'},
                        {name: '《戈黛娃夫人》',img: '戈黛娃夫人.jpg', painter: '高更'},
                        {name: '《清静纯洁》',img: '清静纯洁.jpg', painter: '高更'},
                    ],
                    item3: [
                        {name: '《高特鲁夫人》',img: '高特鲁夫人.jpg', painter: '高更'},
                        {name: '《味道》',img: '味道.jpg', painter: '高更'},
                        {name: '《贝奥景观》',img: '贝奥景观.jpg', painter: '高更'},
                        {name: '《罗马圣彼得教堂》',img: '罗马圣彼得教堂.jpg', painter: '高更'},
                    ],
                    item4: [
                        {name: '《罗纳河上的星空》',img: '罗纳河上的星空.jpg', painter: '高更'},
                        {name: '《塔蒂亚娜》',img: '塔蒂亚娜.jpg', painter: '高更'},
                        {name: '《披纱的夫人》',img: '披纱的夫人.jpg', painter: '高更'},
                        {name: '《奥菲莉亚》',img: '奥菲莉亚.jpg', painter: '高更'},
                    ],
                    item5: [
                        {name: '《亚尔嘉杜的帆影》',img: '亚尔嘉杜的帆影.jpg', painter: '高更'},
                        {name: '《亚尔嘉杜的帆影》',img: '亚尔嘉杜的帆影.jpg', painter: '高更'},
                        {name: '《日落》',img: '日落.jpg', painter: '高更'},
                        {name: '《一束向日葵》',img: '一束向日葵.jpg', painter: '高更'},
                    ],
                }
            ],
            expoItem: [{}]
        };
    },
    created(){
        this.expoItem = this.expoData[0].item1
    },

    mounted() {
        
    },

    methods: {
        getExpoItem(itemID){
            this.liActive = `liActive${itemID}`
            let getItem = `this.expoData[0].item${itemID}`
            this.expoItem = eval(getItem)
            // console.log(this.expoItem);
        }
    },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/index/Hot/hotExpo.scss'
</style>